﻿<table class="gridtable width100pct">
    <tr>
        <th class="width50px">Id</th>
        <th class="width200px">Name</th>
    </tr>
    <tbody data-bind="foreach: AuditTypes">
        <tr>
            <td><span data-bind="text: Id"></span></td>
            <td><span data-bind="text: EntityName"></span></td>
        </tr>
        <tr data-bind="if: AreThereReasons">
            <td class="width25pct">
                <button class="topAligned" data-bind="visible: $data.DirtyFlag.isDirty() == false, click: $parent.ToggleAuditReasonTableVisibility">Show/Hide</button><br/>
                <button data-bind="visible: $data.DirtyFlag.isDirty(), click: $parent.Save">Save</button>
                <button data-bind="visible: $data.DirtyFlag.isDirty(), click: $parent.Cancel">Cancel</button>
            </td>
            <td class="width75pct">
                <!-- ko template: {name: 'AuditReasonTable'} -->
                <!-- /ko -->
            </td>
        </tr>
        <tr data-bind ="ifnot: AreThereReasons">
            <td class="width25pct">
                <button data-bind="visible: $data.DirtyFlag.isDirty(), click: $parent.Save">Save</button>
                <button data-bind="visible: $data.DirtyFlag.isDirty(), click: $parent.Cancel">Cancel</button>
            </td>
            <td class="width75pct">
                <div class="draggableContainer" data-bind="sortable: {data: Reasons, defaultText: 'Drag Audit Reasons Here', afterMove: $data.OnAfterAddAuditReasonToAuditType}"></div>
            </td>
        </tr>
    </tbody>
</table>